<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>SI18n  项目管理</title>
    <meta name="keywords" content="SI18N 项目管理">
    <meta name="description" content="SI18N 项目管理">

    <link href="<?= base_url('assets/css/bootstrap.min.css?v=3.3.6') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/font-awesome.css?v=4.4.0') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/animate.css') ?>" rel="stylesheet">
    <link href="<?= base_url('assets/css/style.css?v=4.1.0') ?>" rel="stylesheet">
    <link rel="stylesheet" href="<?= base_url('assets/js/plugins/ztree/css/zTreeStyle/zTreeStyle.css') ?>" >
    <link rel="stylesheet" href="<?= base_url('assets/js/plugins/ztree/css/demo.css?v=3') ?>" >
  <style>
      .ztree li span.button.add {margin-left:2px; margin-right: -1px; background-position:-144px 0; vertical-align:top; *vertical-align:middle}
  </style>

</head>

<body class="gray-bg">

<div class="wrapper wrapper-content  animated fadeInRight">

    <div class="row">
        <div class="col-sm-6">
            <div class="ibox ">
                <div class="ibox-title">

                    <button class="btn btn-info " type="button" style="margin-left: 20px" id="btn_new_key"><i class="fa fa-plus"></i>新增KEY</button>


                </div>
                <div class="ibox-content">
                    <ul id="tree" class="ztree" style="width:100%; overflow:auto;"></ul>
                </div>
            </div>

        </div>




        <div class="col-sm-6">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5 id="form_title">编辑KEY</h5>

                </div>
                <div class="ibox-content">



                    <form class="form-horizontal m-t" id="key_form">
                        <div class="form-group">


                            <input id="kid" name="kid"  type="hidden" value="">

                            <label class="col-sm-3 control-label">KEY：</label>
                            <div class="col-sm-8">
                                <input id="pkey" name="pkey"  type="text" class="form-control" required="" aria-required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">限制长度：</label>
                            <div class="col-sm-8">
                                <input id="limit_length" type="number" class="form-control" name="limit_length" value="-1">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">说明：</label>
                            <div class="col-sm-8">
                                <textarea id="remark" name="remark" class="form-control"  ></textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-3">
                                <button class="btn btn-primary" type="submit" id="btn_save">保存新增KEY</button>
                            </div>
                        </div>
                    </form>


                </div>
            </div>

        </div>





    </div>

</div>




    <?php include "include/admin_foot_script.php" ?>
    <!-- Data Tables -->
    <script src="<?= base_url('assets/js/plugins/dataTables/jquery.dataTables.js') ?>"></script>
    <script src="<?= base_url('assets/js/plugins/dataTables/dataTables.bootstrap.js') ?>"></script>
    <!-- 自定义js -->
    <script src="<?= base_url('assets/js/content.js?v=1.0.0') ?>"></script>

 <script type="text/javascript" src="<?= base_url('assets/js/plugins/ztree/js/jquery.ztree.core.js') ?>"></script>


<script type="text/javascript" src="<?= base_url('assets/js/plugins/ztree/js/jquery.ztree.excheck.js') ?>"></script>


<script type="text/javascript" src="<?= base_url('assets/js/plugins/ztree/js/jquery.ztree.exedit.js') ?>"></script>


    <script>


        var zTree;
        var demoIframe;

        var pid = <?= $project['id']?>;
        var setting = {
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: true,
                removeHoverDom: removeHoverDom
            },

            data: {
                simpleData: {
                    enable:true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },

            callback: {
                beforeClick: function(treeId, treeNode) {
                   // alert('XXXX2222');
                    var zTree = $.fn.zTree.getZTreeObj("tree");

                    if (treeNode.pId == 0) {
                        return false;
                    }

                    if (treeNode.isParent) {
                        zTree.expandNode(treeNode);
                        return false;
                    } else {
                       // demoIframe.attr("src",treeNode.file + ".html");
                        return true;
                    }
                },
                onDrop:onDrop,
                beforeDrop: beforeDrop,
                onRemove:onRemove,
                beforeRemove: onBeforeRemove,
                onClick:onNodeClick,
                onRename: onRename,
                beforeRename: onBeforeRename
            },

            edit: {
                enable: true,
                showRemoveBtn: showRemoveBtn,
                showRenameBtn: showRemoveBtn,
                drag: {
                    isMove: true,
                    prev: true,
                    next: true,
                    inner: false
                }
            }
        };


        function showRemoveBtn(treeId, treeNode) {
            return treeNode.pId != 0;
        }

        var zNodes = <?= $treeNodes?>;

        function addHoverDom(treeId, treeNode) {
            if (treeNode.pId == "") {
                var sObj = $("#" + treeNode.tId + "_span");
                if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
                var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                    + "' title='add node' onfocus='this.blur();'></span>";
                sObj.after(addStr);
                var btn = $("#addBtn_"+treeNode.tId);
                if (btn) btn.bind("click", function(){
                    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                    zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
                    return false;
                });
            }

        };


        function onBeforeRemove(treeId, treeNode) {
            return confirm("确认删除" + treeNode.name + " 吗？");
        }

        function onNodeClick(event, treeId, treeNode) {
            get_key_info(treeNode.id);
        }


        function get_key_info(id) {
            $.post( '<?= base_url('admin/key/get') ?>',
                {
                    "id": id
                },

                function (res) {
                    $("#kid").val(res.id);
                    $("#form_title").html("编辑KEY");
                    $("#pkey").val(res.pkey);
                    $("#remark").val(res.remark);
                    $("#limit_length").val(res.limit_length);
                    $("#btn_save").html("保存修改");
                }, "json");
        }


        function onRemove(event, treeId, treeNode) {

            $.post( '<?= base_url('admin/key/delete') ?>',
                {
                    "pkey": treeNode.name,
                    "pid": pid
                },

                function (res) {
                    if (res.code == 200) {


                    } else {

                       // var  zTreeobj = $.fn.zTree.getZTreeObj("tree");
                       // zTreeobj.showNodes(zNodes);
                        //zTreeobj.refresh();
                        
                        

                        toastr.error(res.msg, '提示');
                    }

                }, "json");

        }


        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.tId).unbind().remove();
        };





        $(document).ready(function(){

            var t = $("#tree");
            t = $.fn.zTree.init(t, setting, zNodes);


            /*
            demoIframe = $("#testIframe");
            demoIframe.bind("load", loadReady);
            var zTree = $.fn.zTree.getZTreeObj("tree");
            zTree.selectNode(zTree.getNodeByParam("id", 101));*/

            $("#btn_new_key").click(function () {
                $("#form_title").html("新建KEY");
                $("#kid").val("");

                $("#pkey").val("");
                $("#remark").val("");
                $("#limit_length").val(-1);
                $("#btn_save").html("保存新增KEY");

            });

            var icon = "<i class='fa fa-times-circle'></i> ";

            $("#key_form").validate({
                rules: {
                    pkey: {
                        required: true
                    },
                    limit_length: {
                        required: true
                    }
                },

                messages: {
                    pkey: icon + "请输KEY",
                    limit_length: icon + "请输入长度限制"
                },

                submitHandler: function (form) {

                    var kid = $("#kid").val();

                    var submitData = {
                        "pid": pid,
                        'pkey': $("#pkey").val(),
                        'limit_length': $("#limit_length").val(),
                        'remark': $("#remark").val()
                    }

                    var url = "";



                    if (kid == "") {

                        var length = 0;
                        if (getZtreeObj().getNodes()[0].children != undefined) {
                             length = getZtreeObj().getNodes()[0].children.length;
                        }

                        submitData.display_order = length;


                        url = '<?= base_url("admin/key/add") ?>';
                    } else {
                        submitData.id = kid;
                        url = '<?= base_url("admin/key/update") ?>';
                    }

                    $.post(url,
                        submitData,
                        function (res) {
                            if (res.code == 200) {
                                if (kid != "") {

                                    var nodes = getZtreeObj().getSelectedNodes();
                                    nodes[0].name = submitData.pkey;
                                    getZtreeObj().updateNode(nodes[0]);
                                    toastr.success("修改KEY成功", '提示');
                                } else {

                                    var newNode = {name:submitData.pkey, "id": res.id, "pId": pid};
                                    var newNodews = getZtreeObj().addNodes(getZtreeObj().getNodes()[0], newNode);

                                    getZtreeObj().selectNode(newNodews[0], false, false);

                                  //  toastr.success("添加KEY成功", '提示');
                                }

                            } else {
                                toastr.error(res.msg, '提示');
                            }

                        }, "json");
                }
            });


        });

        function getZtreeObj() {
            return $.fn.zTree.getZTreeObj("tree");
        }

        //编辑器前, 记录状态老名称
        var treeNodeOldName = null;
        function onBeforeRename(treeId, treeNode, newName, isCancel) {
            treeNodeOldName = treeNode.name;
            return true;
        }

        function onRename(event, treeId, treeNode, isCancel) {

            if (treeNode.name == treeNodeOldName) return ;
            var submitData = {
                'id': treeNode.id,
                "pid": pid,
                'pkey': treeNode.name
            };

            $.post('<?= base_url("admin/key/update_pkey") ?>',
                submitData,
                function (res) {
                    if (res.code == 200) {
                        get_key_info(treeNode.id);
                        toastr.success("修改KEY成功", '提示');

                    } else {
                        //恢复编辑
                        treeNode.name = treeNodeOldName;
                        getZtreeObj().updateNode(treeNode);
                        toastr.error(res.msg, '提示');
                    }

                }, "json");

        }




        function beforeDrop(treeId, treeNodes, targetNode, moveType) {
            //不允许拖到 外面
            return targetNode != null && targetNode.getParentNode() != null && targetNode.pId != 0;
        };


        function onDrop(event, treeId, treeNodes, targetNode, moveType) {

           var  zTree = $.fn.zTree.getZTreeObj("tree");


            if (targetNode != null && targetNode.getParentNode() != null && targetNode.getParentNode().pId == 0) {


              //  var rootNode = targetNode.getParentNode();


                var nodes = zTree.getNodes()[0].children;


                var nodes_data  = new Array();


                for (var i = 0; i< nodes.length; i++) {

                    nodes_data.push(
                        {
                            "pkey": nodes[i].name,
                            "display_order":nodes[i].getIndex()

                        }
                    );
                }


                $.post( '<?= base_url('admin/key/update_key_order') ?>',
                    {
                        "keyorders": JSON.stringify(nodes_data),
                        "pid": pid
                    },

                    function (res) {
                        if (res.code == 200) {

                        } else {
                            toastr.error(res.msg, '提示');
                        }

                    }, "json");




            }




            //alert(targetNode.getParentNode());
            /*
            if (targetNode.getParentNode() != null && targetNode.getParentNode().pId == 0 ) {
                alert(targetNode.getParentNode().name);
            }*/




           // alert(targetNode.getParentNode().name);
           //var rootNode =  zTree.getNodeByTId(targetNode.parentNode.tId);

            //alert(rootNode.name);

            /*
            zTree.getNode();
            getZTreeObj

            alert(treeNodes[0].pId);*/


            // alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
        };


    </script>

    <script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script><!--统计代码，可删除-->

    </body>
</html>
